<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>微信WEUI源码分析</title>
    <style>
      /* css reset  默认样式重置，对所有浏览器都公平
        IE(edge前身) 做了很多坏事
      */
      * {
        margin: 0;
        padding: 0;
        outline: 0; /* 轮廓 不同的浏览器不一样 */
        box-sizing: border-box;
      }

      /* css inherit 继承 */
      html,
      body {
        height: 100%;
        /* 按上去的高亮颜色  透明 */
        -webkit-tap-highlight-color: transparent;
      }

      html {
        font-size: 62.5%;
      }

      body {
        /* 为苹果用户做优化，支持苹果特殊字体 */
        font-family: system-ui, -apple-system, sans-serif;
      }

      .page,
      body {
        background-color: #ededed;
      }

      .page {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* page 一屏高度，用滚动条 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* overflow-scrolling:touch; */
      }

      .page__hd {
        padding: 4rem;
      }

      .page__title {
        text-align: left;
        font-size: 2rem;
        margin-bottom: 1.5rem;
        font-weight: 400;
      }

      .page__desc {
        margin-top: 0.4rem;
        text-align: left;
        font-size: 1.4rem;
        color: rgba(0, 0, 0, 0.55);
      }

      .button-sp-area {
        margin: 1.5rem auto;
        padding: 1.5rem;
        text-align: center;
      }

      /* weui-基类 css编程的OOP 项目前缀  .tb .tm */
      .weui-btn {
        /* inline -> block */
        display: block;
        width: 18.4rem;
        margin: 0 auto;
        padding: 1.2rem 2.4rem;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        font-size: 1.7rem;
        text-align: center;
        border-radius: 8px;
        line-height: 1.4118;
        /* webkit 代表android chrome, apple等内核
          user-select 是比较新的属性，
          实验属性 -webkit-user-select 支持 有的新手机上能运行
        */
        -webkit-user-select: none;
        /* 防止长按 select 用户会误解*/
        user-select: none;
      }

      /* .weui-btn:not(:last-child) {
        margin-bottom: 1.6rem;
      } */

      /* css高级选择器 兄弟选择器 */
      .weui-btn + .weui-btn {
        margin-top: 1.6rem;
      }

      /* 多态 用modifier */
      .weui-btn_primary {
        background-color: #07c160;
      }

      .weui-btn_default {
        color: rgba(0, 0, 0, 0.9);
        background-color: rgba(0, 0, 0, 0.5);
      }

      .weui-btn_warn {
        background-color: #fa5151;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="page__hd">
        <p class="page__title">Button</p>
        <p class="page__desc">按钮</p>
      </div>
      <div class="page__bd">
        <div class="button-sp-area">
          <a href="#" class="weui-btn weui-btn_primary">主要操作</a>
          <a href="#" class="weui-btn weui-btn_default">次要操作</a>
          <a href="#" class="weui-btn weui-btn_warn">警告</a>
        </div>
      </div>
    </div>
  </body>
</html>
